<template>
    <app-page>
        <app-page-card>
            <a-form :label-col="{ flex: '80px' }">
                <a-row :gutter="[16, 16]">
                    <a-col :span="8">
                        <a-form-item label="名称">
                            <a-input />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="名称">
                            <a-input />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="名称">
                            <a-input />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <div class="app-page-search-btns">
                <a-button type="primary">查询</a-button>
            </div>
        </app-page-card>

        <app-page-card>
            <div class="app-page-table-tools">
                <a-row :gutter="[16, 16]">
                    <a-col :span="18">
                        <a-button type="primary" danger>删除</a-button>
                        <a-button>编辑</a-button>
                    </a-col>
                    <a-col :span="6">
                        <div class="app-page-table-tools-right">
                            <a-button type="primary">
                                <router-link :to="`/Product/ProductsEdit`">添加</router-link>
                            </a-button>
                        </div>
                    </a-col>
                </a-row>
            </div>

        </app-page-card>
        <PageTableDataSource :url="dataTableURL" :queryParams="queryParams" @onGetData="onGetDataSource"
            v-model:loading="loading">

            <a-table :data-source="dataSource" rowKey="Id" size="middle" :pagination="false"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
                <a-table-column title="预览图" :width="90">
                    <template #default="{ record }">
                        <a-image :src="record.Image" style=" border-radius: 6px;" :width="80" :height="80"></a-image>
                    </template>
                </a-table-column>
                <a-table-column title="标题">
                    <template #default="{ record }">
                        <span class="text-hover">{{
                                record.Title
                        }}</span>
                    </template>
                </a-table-column>
                <a-table-column title="作者" prop="Author"></a-table-column>
            </a-table>
        </PageTableDataSource>
    </app-page>
</template>
<script lang="ts" setup>
import PageTableDataSource from "@/components/DataTable/PageTableDataSource.vue";
import { ref } from "vue";

const loading = ref(true);
const dataTableURL = "Article/PageList";
const dataTableRef = ref<any>();
const queryParams = ref({});
const selectedRowKeys = ref<string[]>([]);
const dataSource = ref<any[]>([]);

//加载数据 
const onGetDataSource = (data: any[]) => {
    dataSource.value = data;
}

//查询
const onQuery = () => {
    dataTableRef.value.onQuery();
};

//表格行选中
const onSelectChange = (keys: string[]) => {
    selectedRowKeys.value = keys;
};

</script>